<template>
  <div class="loginBg f jc-c  ai-c">
    <div class="loginBox">
      <div class="conentBox">
        <div class="title">用户<span style="color: #409eff">登录</span></div>
        <div style="display: flex; align-items: center; margin-bottom: 10px">
          <!-- <img
            src="https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/yang/GH/%E8%B4%A6%E5%8F%B7.png"
            style="width: 35px; height: 20px"
          /> -->
          <div style="font-size: 15px; margin-left: 10px">账号</div>
        </div>
        <div class="inputBox">
          <el-input
            class="borderNone"
            maxlength="20"
            v-model="state.userName"
            placeholder="请输入管理员编号"
            input-style="font-size:16px"
          />
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 10px">
          <!-- <img
            src="https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/yang/GH/%E5%AF%86%E7%A0%81.png"
            style="width: 35px; height: 20px"
          /> -->
          <div style="font-size: 15px; margin-left: 10px">密码</div>
        </div>
        <div class="inputBox">
          <el-input
            class="borderNone"
            maxlength="20"
            v-model="state.password"
            placeholder="请输入密码"
            input-style="font-size:16px"
          />
        </div>
        <div class="store" @click="changeState">
          <div
            :class="[state.isActive ? 'square' : 'selSquare']"
            
          ></div>
          <div>记住密码</div>
        </div>

        <!-- 登录确认按钮 -->
        <div class="loginbtn" @click="goLogin">登录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
// 引入路由跳转
import router from "../router/index";
import http from "../libs/http";


// 定义保存变量
const state = reactive({
  userName: "",
  password: "",
  isActive: true,
});
// 路由页面跳转
// const router = useRouter();

// 是否记住密码
const changeState = () => {
  state.isActive = !state.isActive;
};

const initDate = () => {
  console.log("+++++++++++初始化函数被调用了=========》》》》》》》");
};

// 输入框非空判断
const isKong = () => {
  if (state.userName == "" || state.password == "") {
    return false;
  } else {
    return true;
  }
};

const goLogin = async () => {
  console.log(isKong(), "<<<<<<<<", localStorage.getItem('openid') != null);
  if (isKong()) {
    // console.log(">>>>>>>>>>>>拿到传递过来的参数", route.matched);
    let param = {
      use_name: state.userName,
      pass_word: state.password,
    };
    const res = await http.$post("/hd_project/Backend/Login", param);
    if (res.code == 200) {
      console.log(">>>>>>>>>>>>>拿到接口数据了>>>>>>新改的逻辑", res);
      localStorage.setItem('user', JSON.stringify(res.data));
      localStorage.setItem('userName', state.userName);
      localStorage.setItem('openid', res.data.token);
      router.push("/");
    } else {
      ElMessage.error("登录失败！");
    }
  } else {
    ElMessage('填空项不能为空！')
  }
};

// 在挂载前被调用
onBeforeMount(() => {});

// 挂载完成后调用
onMounted(() => {
  initDate();
});
</script>

<style scoped>
.loginBg {
  width: 100%;
  height: 100vh;
  position: relative;
  /* background-image: url(https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/yang/GH/webBg.jpg); */
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #fff;
}
.loginBox {
  width: 489px;
  /* height: 514px; */
  /* position: absolute; */
  background-color: #e6e6e6;
  border-radius: 8px;
  padding: 40px 40px;
  top: 250px;
  right: 200px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.conentBox {
  width: 100%;
  text-align: center;
  /* background: #f2f2f2; */
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  border-radius: 5px;
}
.title {
  width: 100%;
  color: #000;
  font-size: 25px;
  letter-spacing: 0.2rem;
  margin-bottom: 60px;
  text-align: left;
}
.inputBox {
  /* background: #2b4663; */
  border: 1px solid #ccd3db !important;
  background-color: #fff;
  height: 60px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 8px;
}

.iconImg {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.borderNone >>> .el-input__wrapper {
  color: #000;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  box-shadow: none;
}

.store {
  display: flex;
  color: #000;
  margin-bottom: 60px;
}
.square {
  width: 20px;
  height: 20px;
  border: 1px solid #515151;
  margin-right: 10px;
  border-radius: 5px;
}
.selSquare {
  width: 20px;
  height: 20px;
  background-color: #409eff;
  margin-right: 10px;
  border-radius: 5px;
  background-image: url(https://exhibition2020.oss-cn-shenzhen.aliyuncs.com/yang/GH/%E6%89%93%E5%8B%BE1.png);
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 登录按钮 */
.loginbtn {
  background: #409eff;
  height: 60px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 8px;
  color: #fff;
  letter-spacing: 0.2rem;
  font-size: 20px;
}
</style>
